<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="Image/x-icon" href="pictures/icons/fav-ico.ico" rel="icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Lilita+One&family=PT+Sans+Narrow:wght@400;700&family=Raleway:wght@100&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/style.css" />
    <title>Borodinski-shop</title>
  </head>
  <body>
    <div class="wrapper">
      <header class="header header-shop">
        <div class="header__groups">
          <nav class="header__navigation">
            <a href="index.html" class="header__btn btn-main"
              ><img src="pictures/icons/logo-short-dark.svg" alt=""
            /></a>
            <a href="about-us.html" class="header__btn btn-us">О нас</a>
            <a href="#" class="header__btn btn-catalog"> Каталог</a>
            <a href="questions.html" class="header__btn btn-questions"> Частые вопросы</a>
          </nav>
          <div class="header__group-2">
            <a href="#" class="header__btn btn-find">
              <img src="pictures/icons/search.svg" alt="ПОИСК" />
            </a>
            <div class="header__basket basket">
              <a href="#popover" class="header__btn btn-basket popover-link">
                <img
                  class="btn-basket__icon"
                  src="pictures/icons/cart.svg"
                  alt="КОРЗИНА"
                />
                <p class="basket__goods-number">0</p>
              </a>
              <div id="popover" class="basket__popover basket-popover popover">
                <div class="popover__content">
                  <div class="close-popover">
                    <a type="button" class="close-popover__btn">
                      <img src="pictures/icons/cart-black.svg" alt="" />
                      <p class="basket__goods-number">0</p>
                    </a>
                  </div>
                  <h2 class="basket-popover__title">Корзина</h2>
                  <div class="basket-popover__list">
                    <div class="basket-popover__good-wrapper">
                      <div class="basket-popover__good-info">
                        <h3>Стрижка машинкой</h3>
                        <p>800 ₽</p>
                      </div>
                      <div class="basket-popover__delete-btn">
                        <button type="button">
                          <img src="pictures/icons/trash.svg" alt="" />
                        </button>
                      </div>
                    </div>
                    <div class="basket-popover__good-wrapper">
                      <div class="basket-popover__good-info">
                        <h3>Стрижка усов</h3>
                        <p>1200 ₽</p>
                      </div>
                      <div class="basket-popover__delete-btn">
                        <button type="button">
                          <img src="pictures/icons/trash.svg" alt="" />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <a
              href="#popup"
              type="button"
              class="header__btn btn-enter popup-link"
              >Вход</a
            >
          </div>
        </div>
      </header>
      <main class="main main--shop">
        <div class="main-wrapper">
          <div class="main-breadcrumbs">
            <h2 class="main-breadcrumbs__title">Каталог</h2>
            <p class="main-breadcrumbs__pass breadcrumbs-pass">
              <a class="main-breadcrumbs__link" href="index.html">Главная</a
              ><img
                class="main-breadcrumbs__img"
                src="pictures/icons/bullet.svg"
                alt=""
              />Каталог
            </p>
          </div>

          <div class="main__catalog catalog">
            <div class="catalog__wrapper">
              <aside class="catalog__settings settings">
                <div class="settings__price price-setting">
                  <h3 class="settings__subtitle">Цена</h3>
                  <div class="price-setting__slider">
                    <div class="progress"></div>
                  </div>
									<div class="range-input">
										<input type="range" class="range-min" min="0" max="2000" value="300">
										<input type="range" class="range-max" min="0" max="2000" value="1700">
									</div>
                  <p class="price-setting__watch">
                    от <span class="show-value">300</span> ₽ до
                    <span class="show-value">1700</span> ₽
                  </p>
                </div>
								<div class="settings__manufacturers manufacturers-setting">
									<h3 class="settings__subtitle">Производители</h3>
									<ul class="manufacturers-setting__list">
										<li class="manufacturers-setting__item">
											<label class="check option">
												<input type="checkbox" class="check__input" checked>
												<span class="check__box">
												</span>
											</input><p class="check__text">Bed Head for Men</p>
										</label>
									</li>
										<li class="manufacturers-setting__item">
											<label class="check option">
												<input type="checkbox" class="check__input" checked>
												<span class="check__box">
												</span>
											</input><p class="check__text">Homme Deep Cleansing Cool</p>
										</label>
									</li>
										<li class="manufacturers-setting__item">
											<label class="check option">
												<input type="checkbox" class="check__input" checked>
												<span class="check__box">
												</span>
											</input><p class="check__text">So Intense</p>
										</label>
									</li>
										<li class="manufacturers-setting__item">
											<label class="check option">
												<input type="checkbox" class="check__input" checked>
												<span class="check__box">
												</span>
											</input><p class="check__text">Sprekenhus</p>
										</label>
									</li>
										<li class="manufacturers-setting__item">
											<label class="check option">
												<input type="checkbox" class="check__input" checked>
												<span class="check__box">
												</span>
											</input><p class="check__text">Firm Storе</p>
										</label>
									</li>
										<li class="manufacturers-setting__item">
											<label class="check option">
												<input type="checkbox" class="check__input" checked>
												<span class="check__box">
												</span>
											</input><p class="check__text">Winter Body</p>
										</label>
									</li>
									</ul>
								</div>
								<div class="setting__groups groups-setting">
									<h3 class="settings__subtitle">Группы товаров</h3>
									<ul class="groups-setting__list">
										<li class="groups-setting__item">
											<label class="radio">
												<input type="radio" name="radio-1" class="radio__input" >
												<span class="radio__box">
												</span>
											</input><p class="radio__text">Бритвенные принадлежности</p>
											</label>
										</li>
										<li class="groups-setting__item">
											<label class="radio">
												<input type="radio" name="radio-1" class="radio__input" >
												<span class="radio__box">
												</span>
											</input><p class="radio__text">Средства для ухода</p>
											</label>
										</li>
										<li class="groups-setting__item">
											<label class="radio">
												<input type="radio" name="radio-1" class="radio__input" >
												<span class="radio__box">
												</span>
											</input><p class="radio__text">Аксессуары</p>
											</label>
										</li>
									</ul>
									<button class="settings__apply-btn shop-btn" type="submit">Показать</button>
								</label></li></ul>
								</div>
              </aside>
							<div class="catalog__head catalog-head">
								<select name="order" class="catalog-head__select">
									<option value="expensive" class="catalog-head__option">Сначала дорогие</option>
									<option value="cheap" class="catalog-head__option">Сначала дешевые</option>
								</select>
								<div class="catalog-head__btns">
									<button class="catalog-head__btn catalog-first-btn shop-sec-btn" type="button">
										<img src="pictures/icons/union.svg">
									</button>
									<button class="catalog-head__btn catalog-second-btn shop-btn" type="button">
										<img src="pictures/icons/cards-white.svg">
									</button>
								</div>
							</div>
							<div class="catalog__body catalog-body">
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card1.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Шампунь для мужчин Brews Daily</h4>
										<p class="catalog-card__cost">744 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card2.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Syoss шампунь Men Power & Strength</h4>
										<p class="catalog-card__cost">160 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card3.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Schauma «Сила и объём с хмелем»</h4>
										<p class="catalog-card__cost">94 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card1.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Шампунь для мужчин Brews Daily</h4>
										<p class="catalog-card__cost">744 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card2.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Syoss шампунь Men Power & Strength</h4>
										<p class="catalog-card__cost">160 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card3.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Schauma «Сила и объём с хмелем»</h4>
										<p class="catalog-card__cost">94 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card3.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Schauma «Сила и объём с хмелем»</h4>
										<p class="catalog-card__cost">94 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card1.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Шампунь для мужчин Brews Daily</h4>
										<p class="catalog-card__cost">744 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card2.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Syoss шампунь Men Power & Strength</h4>
										<p class="catalog-card__cost">160 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card3.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Schauma «Сила и объём с хмелем»</h4>
										<p class="catalog-card__cost">94 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card1.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Шампунь для мужчин Brews Daily</h4>
										<p class="catalog-card__cost">744 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
								<div class="catalog-body__card catalog-card">
									<img src="pictures/card2.png" alt="" class="catalog-card__img">
									<div class="catalog-card__text-block">
										<h4 class="catalog-card__title">Syoss шампунь Men Power & Strength</h4>
										<p class="catalog-card__cost">160 ₽</p>
									</div>
									<button type="button" class="catalog-card__btn shop-btn">Купить</button>
								</div>
							</div>
							<div class="catalog__bottom catalog-bottom">
								<div class="catalog-bottom__pagination">
									<button type="button" class="shop-btn catalog-bottom__pagination-btn-type-1" disabled>
										<img src="pictures/icons/arrow-left.svg" alt="">
									</button>
									<button type="button" class="shop-btn catalog-bottom__pagination-btn-type-2">1</button>
									<button type="button" class="shop-btn catalog-bottom__pagination-btn-type-2">2</button>
									<button type="button" class="shop-btn catalog-bottom__pagination-btn-type-2">3</button>
									<button type="button" class="shop-btn catalog-bottom__pagination-btn-type-2">4</button>
									<button type="button" class="shop-btn catalog-bottom__pagination-btn-type-2">5</button>
									<button type="button" class="shop-btn catalog-bottom__pagination-btn-type-1">
										<img src="pictures/icons/arrow-right.svg" alt="">
									</button>
								</div>
								<button type="button" class="catalog-bottom__show-more-btn shop-btn">Показать ещё</button>
							</div>
            </div>
          </div>
        </div>
      </main>
      <!-- Футер -->
      <footer class="footer">
        <div class="footer__wrapper">
          <div class="footer__info footer-left">
            <img
              src="pictures/icons/logo-short-dark.svg"
              alt="BORODINSKI"
              class="footer-left__short-logo"
            />
            <p class="footer-left__paragraph">
              Санкт-Петербург, набережная<br />
              реки Карповки, 5, литера П.
            </p>
            <h3 class="footer-left__phone">+7 800 555-86-28</h3>
            <a href="" class="footer-left__link">Как нас найти?</a>
          </div>
          <div class="footer__offers footer-middle">
            <h3 class="footer-middle__title footer-title">
              Получайте лучшие предложения
            </h3>
            <div class="footer__form">
              <input
                class="footer-middle__email-form"
                type="text"
                placeholder="Введите ваш email"
              />
              <button class="submit-email-btn">
                <img src="pictures/icons/arrow-tail-right.svg" alt="" />
              </button>
            </div>
          </div>
          <div class="footer__social-media footer-right">
            <h3 class="footer-right__title footer-title">Давайте дружить</h3>
            <button class="footer-right__btn btn-sotial-media" type="button">
              <p>Профиль gitHub</p>
              <img src="pictures/icons/gitHub.png" alt="" width="auto%" />
            </button>
            <p class="footer-right__signature">
              Created by: <span class="creator">Hollow_DS</span>
            </p>
          </div>
        </div>
      </footer>
      <!-- Popup -->
      <div id="popup" class="popup">
        <div class="popup__body">
          <div class="popup__content">
            <a href="#" class="popup__close close-popup"
              ><img src="pictures/icons/cross.svg" alt=""
            /></a>
            <div class="popup__title">Личный кабинет</div>
            <div class="popup__box-1">
              <input class="popup__form-1 full-form__input" type="text" />
              <input class="popup__form-2 full-form__input" type="password" />
            </div>
            <div class="popup__box-2">
              <div class="popup__checkbox-container checkbox">
                <label class="check option">
                  <input class="check__input" type="checkbox" checked /><span
                    class="check__box"
                  ></span
                  >Запомнить меня
                </label>
              </div>
              <a class="foggot-password" href="">Забыл пароль</a>
            </div>
            <button class="popup-btn-enter" type="submit">Войти</button>
            <button class="popup-btn-registration" type="submit">
              Регистрация
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
